<template>
  <div class="index">
    <my-header>
      <template #left> 搜索 </template>
      <template #center>
        {{ adressName }}
      </template>
      <template #right>
        <span style="font-size: 12px">登录|注册</span>
      </template>
    </my-header>
    <div class="count">
      <my-list :childList="list"></my-list>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import api from "../../api/request";
import myHeader from "../../components/myHeader.vue";
import MyList from "../../components/myList.vue";
export default {
  components: { myHeader, MyList },
  setup() {
    const route = useRoute();
    let geohash = route.query.geohash;
    const data = reactive({
      adressName: "",
      list: [], // 商圈商家的数据
    });
    if (geohash) {
      api.get(`/v2/pois/${geohash}`).then((res) => {
        // 获取商家头部的信息
        data.adressName = res.name;
      });
      // console.log(geohash.split(','));
      // split(',') 把字符串转换成数组
      api
        .get(
          `/shopping/restaurants?latitude=${geohash.split(",")[0]}&longitude=${
            geohash.split(",")[1]
          }`
        )
        .then((res) => {
          data.list = res;
        });
    }
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.index {
  height: 100%;
}
.count {
  height: calc(100% - 50px);
  overflow: auto;
}
</style>